import React from 'react';
import { Layout, Button } from 'antd';
import { ENUM_OPERATION } from 'shared/utils/enumerate';
/* eslint-disable */
const Title = ({ icon, title, onSave, loading, embed, onClose, closable, btns, operation }) => {
  btns = btns || [{ key: 1, text: '保存', onClick: onSave, type: 'primary', icon: 'save' }];
  if (operation === ENUM_OPERATION.VIEW) {
    btns = [];
  }
  const style = { marginRight: 8 };
  const btnComponent = btns.map(item => <Button key={item.key} disabled={item.disabled} onClick={item.onClick} loading={loading} icon={item.icon} type={item.type} style={style}>{item.text}</Button>);
  if (embed) {
    return (
      <div className="web-box">
        {icon ? <div width={32} className="web-box-item web-modal-icon">{icon}</div> : null}
        <div className="web-box-item flex-grow-1 ant-modal-title">{title}</div>
        <div className="web-box-item web-modal-save">
          {btnComponent}
        </div>
        <div onClick={closable ? onClose : null} className="web-box-item ant-modal-close">
          <span className="ant-modal-close-x"></span>
        </div>
      </div>
    )
  } else {
    return (
      <div className="web-box">
        {icon ? <div width={32} className="web-box-item web-modal-icon">{icon}</div> : null}
        <div className="web-box-item flex-grow-1">{title}</div>
        <div className="web-box-item web-modal-save">
          {btnComponent}
        </div>
      </div>
    )
  }
};
export default Title;
